<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .selected {
      background: #0f0;
    }

    li {
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>

<body>

  Click on a list item to select it.
  <br>

  <ul id="ul">
    <li>Christopher Robin</li>
    <li>Winnie-the-Pooh</li>
    <li>Tigger</li>
    <li>Kanga</li>
    <li>Rabbit. Just rabbit.</li>
  </ul>

  <script>
    ul.addEventListener('click', (e) => {
      const target = e.target
      const liList = ul.children
      if (target.tagName !== 'LI') return
      const { ctrlKey, metaKey } = e
      e.target.classList.add('selected')
      // 按住了键盘
      if (ctrlKey || metaKey) return
      console.log(ctrlKey, metaKey, liList)
      Array.from(liList).forEach(item => {
        if (item !== target) {
          item.classList.remove('selected')
        }
      })
    })
  </script>

</body>
</html>